<template>
  <div>
    <el-form ref="searchKey"
             :inline="true"
             :model="searchKey"
             :show-message="false"
             :inline-message="true"
             label-position="left"
             label-width="60px">
      <el-form-item label="姓名" prop="employeeName" label-width="50px">
        <el-input disabled size="small" v-model="searchKey.employeeName" placeholder="请输入姓名"
                  style="width: 120px;"></el-input>
      </el-form-item>
      <!--<el-form-item label="状态" prop="employeeStatus" label-width="50px">
        <el-select size="small" v-model="searchKey.employeeStatus" placeholder="请选择" style="width: 100px;">
          <el-option label="请选择" value=""></el-option>
          <el-option label="在职" :value="0"></el-option>
          <el-option label="待离职" :value="1"></el-option>
          <el-option label="离职" :value="20"></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="发放月份" prop="salaryDate" label-width="80px">
        <el-date-picker
          size="small"
          v-model="searchKey.salaryDate"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <!--<el-form-item class="treeSelect" label="部门" prop="deptId" label-width="50px">
        <tree-select v-model="searchKey.deptId" :options="departmentAllListData"
                     :normalizer="treeSelectProps"
                     placeholder="选择部门"
                     style="width: 200px; height: 32px; line-height: 30px;"/>
      </el-form-item>
      <el-form-item label="职务" prop="postIds" label-width="50px">
        <el-select size="small" v-model="searchKey.postIds" placeholder="请选择职务" multiple collapse-tags
                   style="width: 170px">
          <el-option label="请选择职务" value=""></el-option>
          <el-option v-for="(item, index) in jobAllListData" :key="`${item.postName}${index}`"
                     :label="item.postName"
                     :value="item.postId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商业险" prop="payBusinessInsurance" label-width="60px">
        <el-select size="small" v-model="searchKey.payBusinessInsurance" placeholder="请选择" style="width: 100px;">
          <el-option label="请选择" value=""></el-option>
          <el-option label="未缴纳" value="0"></el-option>
          <el-option label="缴纳" value="1"></el-option>
        </el-select>
      </el-form-item>-->

      <el-form-item label="发放类型" prop="salaryType" label-width="80px" >
        <el-select size="small" v-model="searchKey.salaryType" placeholder="请选择发放类型" >
          <el-option label="请选择" value=""></el-option>
          <el-option label="工资发放" :value="1"></el-option>
          <el-option label="工资补发" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <!--<el-form-item label="工资范围" prop="salaryRange" label-width="70px">
        <el-select size="small" v-model="searchKey.salaryRange" clearable placeholder="请选择区间" style="width: 130px;">
          <el-option
            v-for="item in baseSalaryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职日期" prop="entrySelectedDate" label-width="70px">
        <el-date-picker
          size="small"
          v-model="searchKey.entrySelectedDate"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          style="width: 250px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离职日期" prop="dimissionSelectedDate" label-width="70px">
        <el-date-picker
          size="small"
          v-model="searchKey.dimissionSelectedDate"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          style="width: 250px;">-->
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        <!-- 在职导出 -->
        <el-button v-if="pageType != 'leaved'" size="small" type="warning" icon="el-icon-download" v-hasPermi="['hr:employee:salaryMonth:export']"
                   @click="handleExport">导出
        </el-button>
        <!-- 离职导出 -->
        <el-button v-if="pageType == 'leaved'" size="small" type="warning" icon="el-icon-download" v-hasPermi="['hr:leaved:employee:salaryMonth:export']"
                   @click="handleExport">导出
        </el-button>
        <el-button size="small" type="success" icon="el-icon-back"
                   @click="handleBack">返回
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { debounce } from 'lodash'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'SalarylistSearch',
    mixins: [],
    components: {
      TreeSelect
    },
    data() {
      return {
        baseSalaryOptions: [{
          value: '0-5000',
          label: '< 5k'
        }, {
          value: '5000-8000',
          label: '5k - 8k'
        }, {
          value: '8000-12000',
          label: '8k - 12k'
        }, {
          value: '12000-15000',
          label: '12k - 15k'
        }, {
          value: '15000-1000000',
          label: '> 15k'
        }],
        isShowFilter: false, // 是否显示搜索
        searchKey: {},
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: true
          }
        }
      }
    },
    props: {
      pageType:String,
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      departmentAllListData: {// 搜索参数
        type: Array,
        required: true,
        default() {
          return []
        }
      },
      jobAllListData: { // 下拉的职位列表
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
    	handleBack(){
        this.$store.dispatch("tagsView/delView", this.$route);
    		history.back();
    	},
      resetSearchData() { // 重置表单
        let name = this.searchKey.employeeName;
        this.searchKey = {
          ...JSON.parse(JSON.stringify(this.initParams)),
          ...{
            pageSize: this.searchKey.pageSize
          },
          ... {
            employeeName :   name     //重置后姓名回填
          }
        }
      },
      handleFilter: debounce(function() { // 查询，防抖
        this.searchKey.pageNum = 1
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleReset: debounce(function() { // 重置查询，防抖
        this.resetSearchData()
        this.$emit('on-init', this.searchKey)
      }, 300),
      handleExport: debounce(function() { // 导出，防抖
        this.$emit('on-export', this.searchKey)
      }, 300),
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      pageType: {
         handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.pageType)) {
            this.pageType = JSON.parse(JSON.stringify(newVal))
          }
          //alert( this.pageType);
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    	let query = this.$route.params;
    	this.searchKey.employeeName = query.name;
    },
    mounted() {
      //取不到，prop传参在父页面第一次初始化会传一次，后面的只能在watch里面监听
      //alert(this.pageType);
    }
  }
</script>

<style lang="scss" scoped>
  .treeSelect {
    & /deep/ .vue-treeselect__control {
      height: 32px;
    }
  }
</style>
